{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
{% endblock header_tail %}

{% block section_content %}
<div class="box-header with-border">
    <h3 class="box-title">可视化配置（公测）</h3>
</div>
<div class="row">
    <form role="form">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">任务ID：<span>{{ tid }}</span></h3>
                    <div class="box-tools pull-right">
                    </div>
                </div>
                <div class="box-body">
                    <!--基本信息填写--start-->
                    <div class="form-group" name="config_info">
                        <div class="col-sm-1 col-sm-1 control-label">网站类型</div>
                        <div class="col-sm-1">
                            <select class="control-form input-sm m-b-2" name="info_flag_select"
                                    id="info_flag_select">
                                <option value="01">新闻</option>
                                <option value="02">论坛</option>
                                <option value="05">平煤</option>
                            </select>
                        </div>
                        <div class="col-sm-1 col-sm-1 control-label">网站名称</div>
                        <div class="col-sm-2">
                            <input type="text" placeholder="值" class="form-control" name="site_name_value"
                                   value="{{ webname }}">
                        </div>
                        <div class="col-sm-1 col-sm-1 control-label">网站域名</div>
                        <div class="col-sm-2">
                            <input type="text" placeholder="值" class="form-control" name="site_domain_value"
                                   value="{{ domain }}">
                        </div>
                        <div class="col-sm-1 col-sm-1 control-label">网站编码</div>
                        <div class="col-sm-2">
                            <input type="text" placeholder="网站编码" class="form-control" name="encoding_value"
                                   value="{{ coding }}">
                        </div>
                    </div>
                    <!--基本信息填写--end-->
                    <div class="form-group" name="channels">
                        <div class="col-sm-1 col-sm-1 control-label">频道编辑</div>
                        <div class="col-sm-3">
                            <p class="btn btn-xs btn-primary" onclick="$('#config-channel-editor').modal();">频道编辑</p>
                        </div>
                    </div>
                    <div class="form-group" name="testURL">
                        <div class="col-sm-1 col-sm-1 control-label">测试链接</div>
                        <div class="col-sm-10">
                            <input type="text" placeholder="列表页链接" class="form-control" name="testURL_value" value="{{ test_channel_url.0 }}">
                        </div>
                    </div>
                    <div class="form-group  panel panel-success" name="parse" id="parse">
                        <div class="panel-heading">
                                <h3 class="panel-title">列表页解析规则</h3>
                        </div>
                        <div class="panel-body">
                        <!--loops规则 start-->
                        <div class="form-group panel panel-info" id="loops_rule_box">
                            <div class="panel-heading">
                                <h3 class="panel-title">loops规则</h3>
                            </div>
<!--                            <button type="button" class="btn btn-primary btn-success pull-right"-->
<!--                                        onclick="getUrlRules('loops')">保存</button>-->
                            <!--<div class="col-sm-1 panel-body">-->
                                <!--<p class="btn btn-primary" onclick="addNode('loops_rule')">Add</p>-->
                            <!--</div>-->
                            <div class="col-sm-8 panel-body loops_rule" id="loops_rule">
                                <div class="col-sm-2">
                                    <select class="control-form input-sm m-b-2 loops_rule_type_select" onchange="changeRuleType('loops_rule')">
                                        <option value="xpathall">xpathall</option>
                                        <option value="regexall">正则</option>
                                    </select>
                                </div>
                                <div class="col-sm-10 rule_values">
                                    <input type="text" placeholder="解析规则" class="form-control" name="loops_rule_value" value="{{ loops_rule }}">
                                </div>
                            </div>
                        </div>
                        <!--loops规则 end-->
                        <!--URL规则 start-->
                        <div class="form-group panel panel-info" name="url_rule" id="url_rule_box">
                            <div class="panel-heading">
                                <h3 class="panel-title">URL规则</h3>
                            </div>
<!--                            <button type="button" class="btn btn-primary btn-success pull-right"-->
<!--                                        onclick="getUrlRules('url')">保存</button>-->
                            <!--<div class="col-sm-1 col-sm-1 control-label">URL规则</div>-->
<!--                            <div class="col-sm-1 panel-body">-->
<!--                                <p class="btn btn-primary" onclick="addNode('url_rule')">Add</p>-->
<!--                            </div>-->
                            <div class="col-sm-8 panel-body url_rule" id="url_rule">
                                <div class="col-sm-2">
                                    <select class="control-form input-sm m-b-2 url_rule_type_select" onchange="changeRuleType('url_rule')">
                                        <option value="xpath">xpath</option>
                                        <option value="regex">正则</option>
                                    </select>
                                </div>
                                <div class="col-sm-10 rule_values">
                                    <input type="text" placeholder="解析规则" class="form-control" name="url_rule_value" value="{{ post_url_rule }}">
                                </div>
                            </div>
                        </div>
                        <!--URL规则 end-->
                        <!--时间规则 start-->
                        <div class="form-group panel panel-info" name="ctime_rule" id="ctime_rule_box">
                            <div class="panel-heading">
                                <h3 class="panel-title">时间规则</h3>
                            </div>
<!--                            <button type="button" class="btn btn-primary btn-success pull-right"-->
<!--                                        onclick="getUrlRules('ctime')">保存</button>-->
<!--                            <div class="col-sm-1 panel-body">-->
<!--                                <p class="btn btn-primary" onclick="addNode('ctime_rule')">Add</p>-->
<!--                            </div>-->
                            <div class="col-sm-8 panel-body ctime_rule" id="ctime_rule">
                                <div class="col-sm-2">
                                    <select class="control-form input-sm m-b-2 ctime_rule_type_select" onchange="changeRuleType('ctime_rule')">
                                        <option value="xpath">xpath</option>
<!--                                        <option value="replace">替换</option>-->
                                        <option value="regex">正则</option>
                                    </select>
                                </div>
                                <div class="col-sm-10 rule_values">
                                    <input type="text" placeholder="解析规则" class="form-control" name="ctime_rule_value" value="{{ post_ctime_rule }}">
                                </div>
                            </div>
                        </div>
                        <!--时间规则 end-->
                        </div>
                    </div>
<!--                    <p class="btn btn-primary" onclick="addNode('parse')">Add</p>-->
                    <div class="form-group" name="next">
                        <div class="col-sm-6">
<!--                            <p style="display: none" id="config-flag"></p>-->
<!--                            <p style="display: none" id="entrance_url"></p>-->
<!--                            <p style="display: none" id="api_debug_url">/task/debugapi/</p>-->
<!--                            <p style="display: none" id="api_debug_result_url">/task/debug/result/</p>-->
<!--                            <p style="display: none" id="api_debug_kill_url">/task/debug/kill/</p>-->
<!--                            <label>代理</label>-->
<!--                            <input type="radio" name="proxy" value="0" class="debug-radio" checked="">不使用-->
<!--                            <input type="radio" name="proxy" value="1" class="debug-radio">使用-->
<!--                            <span style="margin-left: 10px"></span>-->
<!--                            <label>环境</label>-->
<!--                            <input type="radio" name="env" value="0" class="env-radio" checked="">国内-->
<!--                            <input type="radio" name="env" value="1" class="env-radio">国外-->
                            <button type="button" class="btn btn-primary" onclick="config_test(0)">测试</button>
<!--                            <button type="button" class="btn btn-primary" onclick="config_test(1)">测试全部链接</button>-->
                        </div>
                        <div class="col-sm-5">
                            <a class="btn btn-primary btn-success pull-right" href="{% url 'task:visualization' %}?step=detail&tid={{ tid }}">下一步
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- 频道编辑弹出窗口-->
<div class="modal fade" id="config-channel-editor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document" style="width: 80%">
        <div class="modal-content">
            <div class="modal-body" style="width: 100%">
                <table class="table table-bordered table-striped" style="width: 100%; table-layout: fixed">
                    <thead>
                    <tr>
                        <th style="width: 75%">频道url</th>
                        <th style="width: 15%">名称</th>
                        <th style="width: 10%">操作</th>
                    </tr>
                    </thead>
                    <tbody id="channel-tbody">
                    {% for channel in channel_list %}
                    <tr class="channel-tr">
                        <td class="channel-url">
                            <span>{{ channel.0 }}</span>
                            <input type="hidden" name="channel_url" value="{{ channel.0 }}">
                        </td>
                        <td class="channel-name">
                            <span>{{ channel.1 }}</span>
                            <input type="hidden" name="channel_name" value="{{ channel.1 }}">
                        </td>
                        <td>
                            <span class="btn-link channels-delete" style="cursor: pointer" onclick="delete_channel('{{ channel.0 }}')">删除</span>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <form action="{% url 'task:channel_change' %}" method="post">
                    {% csrf_token %}
                    <div class="form-group" id="channel-display">
                        <label for="channel-config-content">增加频道-格式:频道URL#频道名称回车</label>
                        <input type="hidden" name="task_id" value="{{ tid }}">
                        <textarea name="channel-config-content" class="form-control" id="channel-config-content"
                                  cols="30" style="height: 200px;">
                        </textarea>
                        <div class="modal-footer">
                            <button type="submit" id="btn_submit" class="btn btn-primary">
                                提交
                            </button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<!--测试结果弹出框-->
<div class="modal fade" id="runResult" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" style="top:15px">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                测试结果：
            </div>
            <div id="runResultBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                <textarea id="runResultMessage" name="runResultMessage"
                          style="width: 570px; height: 500px; "></textarea>
            </div>
            <div class="modal-footer" style="text-align:center;">
                <button type="button" class="btn btn-default" onclick=""
                        data-dismiss="modal">确认
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-default" id="debugMessage">查看报错信息
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock section_content %}
{% block jquery_js %}
<script src="{% static 'public/js/password.js' %}"></script>
<script>
    // 导航栏
    function changeColor(id, color) {
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }

    $('#myTasks').addClass("active");
    changeColor("#mine", "#00FF7F");

    // 刪除頻道
    function delete_channel(channel_url) {
        $.post({
            url: "{% url 'task:channel_change' %}",
            data: {
                csrfmiddlewaretoken:'{{ csrf_token }}',
                task_id: "{{ tid }}",
                delete: '1',
                channel_url: channel_url
            },
            success: function (resp) {
                window.location.reload();
            }
        })
    }


    // 添加节点
    var num_item = 0;
    function addNode(tagID, max_tag) {
        var max_tag = max_tag || 5;
        if (num_item > max_tag) {
            alert('最多添加' + max_tag + '个规则');
            return false
        }
        var box = document.getElementById(tagID);
        var newNode = box.cloneNode(true);
        newNode.id = tagID + num_item;
        var p = document.createElement("p");
        p.appendChild(document.createTextNode('Del'));
        p.className = 'btn btn-primary';
        p.setAttribute("onclick", "removeNode('" + newNode.id + "')");
        newNode.appendChild(p);
        insertAfter(box, newNode);
        $("#"+newNode.id).find("input").attr("disabled", "disabled");
        // $("#"+newNode.id).find("select").attr("disabled", "disabled");
        num_item++;
    }

    function removeNode(tagID) {
        var box = document.getElementById(tagID);
        box.remove();
        num_item--
    }

    //在指定节点后插入元素
    function insertAfter(targetElement, newElement) {
        var parent = targetElement.parentNode;
        if (parent.lastChild == targetElement) {
            parent.a(newElement, targetElement);
        } else {
            parent.insertBefore(newElement, targetElement.nextSibling);
        }
    }

    // function changeRuleType(nodeId) {
    //     var rule_type = $("#" + nodeId + " option:selected").val();
    //     var parent_node = document.getElementById(nodeId).getElementsByClassName("rule_values")[0];
    //     if(rule_type == 'replace'){
    //         var node = '<input type="text" placeholder="被替换的字符串" class="form-control '+ nodeId + '_value">'
    //             + '<input type="text" placeholder="新字符串，用于替换old子字符串" class="form-control '+ nodeId + '_value">';
    //     }else if(rule_type == 'xpath'){
    //         var node = '<input type="text" placeholder="xpath表达式" class="form-control '+ nodeId + '_value">';
    //     }else if(rule_type == 'xpathall'){
    //         var node = '<input type="text" placeholder="xpathall表达式" class="form-control '+ nodeId + '_value">';
    //     }else if(rule_type == 're'){
    //         var node = '<input type="text" placeholder="正则表达式" class="form-control '+ nodeId + '_value">';
    //     }else if(rule_type == 'split'){
    //         var node = '<input type="text" placeholder="分隔符" class="form-control '+ nodeId + '_value">'
    //             + '<input type="number" placeholder="索引" class="form-control '+ nodeId + '_value">';
    //     }else if(rule_type == 'string'){
    //         var node = '<input type="text" placeholder="指定值" class="form-control '+ nodeId + '_value">';
    //     }
    //     parent_node.innerHTML = node;
    // }

    // 保存规则
    // function getUrlRules(field) {
    //     var url_rules = document.getElementsByClassName('panel-body '+ field + '_rule');
    //     var rule_json = {"replace": [], "split": [], "xpath": "", "xpathall": "", "re": "", "string": ""};
    //     for(var i=1; i < url_rules.length; i++){
    //         var rule_obj = url_rules[i].getElementsByClassName(field+'_rule_type_select')[0];
    //         var index = rule_obj.selectedIndex;
    //         var rule_type = rule_obj[index].value;
    //         var rule = url_rules[i].getElementsByClassName(field+"_rule_value");
    //         if (rule_type == 'replace'){
    //             var old_str = rule[0].value;
    //             var new_str = rule[1].value;
    //             rule_json['replace'].push({"old_str": old_str, "new_str": new_str})
    //         }else if(rule_type == 'split'){
    //             var set = rule[0].value;
    //             var index = rule[1].value;
    //             rule_json['split'].push({"set": set, "index": index})
    //         }else{
    //             rule_json[rule_type] = rule[0].value
    //         }
    //     }
    //     $.post({
    //         url: "",
    //         data: {
    //             task_id : "{{ tid }}",
    //             rules: JSON.stringify(rule_json),
    //             field: field
    //         },
    //         success: function (resp) {
    //             alert(resp.message)
    //         }
    //     })
    // }

    function config_test(test_type) {
        $('#runResultMessage').val('正在下载链接，请稍等。。。');
        var info_flag = $("#info_flag_select option:selected").val();
        var webname = $("input[name='site_name_value']").val();
        var domain = $("input[name='site_domain_value']").val();
        var channel_url = $("input[name='testURL_value']").val();
        var coding = $("input[name='encoding_value']").val();
        var loops_rule_type = $(".loops_rule_type_select option:selected").val();
        var loops_rule_value = $("input[name='loops_rule_value']").val();
        var url_rule_type = $(".url_rule_type_select option:selected").val();
        var url_rule_value =  $("input[name='url_rule_value']").val();
        var ctime_rule_type = $(".ctime_rule_type_select option:selected").val();
        var ctime_rule_value =  $("input[name='ctime_rule_value']").val();
        if (!webname || !domain || !channel_url || !coding || !loops_rule_value || !url_rule_value || !ctime_rule_value){
            alert('请将参数填写完整');
            return false;
        }
        $('#runResult').modal();
        $.post({
            url: "{% url 'task:config_test' %}",
            data: {
                csrfmiddlewaretoken:'{{ csrf_token }}',
                task_id: "{{ tid }}",
                info_flag: info_flag,
                webname: webname,
                domain: domain,
                channel_url: channel_url,
                coding: coding,
                loops_rule_type: loops_rule_type,
                loops_rule_value: loops_rule_value,
                url_rule_type: url_rule_type,
                url_rule_value: url_rule_value,
                ctime_rule_type: ctime_rule_type,
                ctime_rule_value: ctime_rule_value
            },
            success: function (resp) {
                var detail_urls = resp.detail_urls;
                if(!detail_urls){
                    $('#runResultMessage').val('没有匹配到链接');
                }else {
                    $('#runResultMessage').val(detail_urls);
                }
                $('#debugMessage').click(function () {
                    $('#runResultMessage').val = '';
                    $('#runResultMessage').val(resp.run_result);
                })
            }
        });
    }
</script>
{% endblock jquery_js %}

